<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-message-show
  [help_message_content]="'bulletin.help.content' | i18n"
  [guild_link]="'bulletin.help.link' | i18n"
  [module_name]="'menu.monitor.bulletin'"
  [icon_name]="'book'"
></app-help-message-show>

<nz-divider></nz-divider>

<app-toolbar>
  <ng-template #left>
    <button nz-button nzType="primary" (click)="sync()" nz-tooltip [nzTooltipTitle]="'common.refresh' | i18n">
      <i nz-icon nzType="sync" nzTheme="outline"></i>
    </button>
    <button nz-button nzType="primary" (click)="onNewBulletinDefine()">
      <i nz-icon nzType="appstore-add" nzTheme="outline"></i>
      {{ 'common.button.new' | i18n }}
    </button>
    <button *ngIf="currentBulletin" nz-button nz-dropdown [nzDropdownMenu]="more_menu">
      <span nz-icon nzType="ellipsis"></span>
    </button>
    <nz-dropdown-menu #more_menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <button nz-button nzDanger (click)="onDeleteBulletinDefines()">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
            {{ 'common.button.delete' | i18n }}
          </button>
        </li>
        <li nz-menu-item>
          <button nz-button nzDanger (click)="onBatchDeleteBulletinDefines()">
            <i nz-icon nzType="delete" nzTheme="outline"></i>
            {{ 'bulletin.batch.delete' | i18n }}
          </button>
        </li>
      </ul>
    </nz-dropdown-menu>
  </ng-template>
  <ng-template #right>
    <button nz-button nz-dropdown [nzDropdownMenu]="time_menu" nzPlacement="bottomLeft">
      <span *ngIf="deadline > 0"> {{ 'monitor.detail.auto-refresh' | i18n : { time: countDownTime } }} </span>
      <span *ngIf="deadline <= 0"> {{ 'monitor.detail.close-refresh' | i18n }} </span>
    </button>
    <nz-dropdown-menu #time_menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item (click)="configRefreshDeadline(10)"> {{ 'monitor.detail.config-refresh' | i18n : { time: 10 } }} </li>
        <li nz-menu-item (click)="configRefreshDeadline(30)"> {{ 'monitor.detail.config-refresh' | i18n : { time: 30 } }} </li>
        <li nz-menu-item (click)="configRefreshDeadline(60)"> {{ 'monitor.detail.config-refresh' | i18n : { time: 60 } }} </li>
        <li nz-menu-item (click)="configRefreshDeadline(300)"> {{ 'monitor.detail.config-refresh' | i18n : { time: 300 } }} </li>
        <li nz-menu-item (click)="configRefreshDeadline(-1)"> {{ 'monitor.detail.close-refresh' | i18n }}</li>
      </ul>
    </nz-dropdown-menu>
  </ng-template>
</app-toolbar>

<nz-tabset nzType="card" (nzSelectedIndexChange)="onTabChange($event)">
  <nz-tab *ngFor="let tab of bulletins" [nzTitle]="tab.name">
    <ng-container *ngIf="metricsData">
      <nz-table
        #fixedTable
        [nzData]="metricsData"
        [nzPageIndex]="pageIndex"
        [nzPageSize]="pageSize"
        [nzTotal]="total"
        nzFrontPagination="false"
        [nzLoading]="tableLoading"
        nzShowSizeChanger
        [nzPageSizeOptions]="[10, 20, 50]"
        (nzQueryParams)="onTablePageChange($event)"
        nzShowPagination="true"
        [nzScroll]="{ x: 'auto' }"
        nzBordered
        class="table"
      >
        <thead>
          <tr>
            <th nzAlign="center" nzWidth="7%" [rowSpan]="2">App</th>
            <th nzAlign="center" nzWidth="7%" [rowSpan]="2">Host</th>
            <ng-container *ngFor="let metric of metrics">
              <th nzAlign="center" [colSpan]="getKeys(metric).length"> {{ getMetricName(tab.app, metric) }} </th>
            </ng-container>
          </tr>
          <tr>
            <ng-container *ngFor="let metric of metrics">
              <ng-container *ngFor="let field of getKeyNames(tab.app, metric)">
                <th nzAlign="center" [colSpan]="1">
                  {{ field }}
                </th>
              </ng-container>
            </ng-container>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let content of fixedTable.data">
            <tr>
              <td nzAlign="center" [rowSpan]="1">
                <button nz-button nzSize="default" nzType="link" [routerLink]="['/monitors/' + content.monitorId]">
                  {{ content.monitorName }}
                </button>
              </td>
              <td nzAlign="center" [rowSpan]="1">{{ content.host }}</td>
              <ng-container *ngFor="let metric of content.metrics">
                <ng-container *ngFor="let field of metric.fields[0]">
                  <td nzAlign="center">
                    <ng-container *ngFor="let item of combine(field, metric.fields)">
                      <ng-container *ngIf="item.value === 'NO_DATA'; else hasData">
                        <nz-tag nzColor="warning">No Data Available</nz-tag>
                      </ng-container>
                      <ng-template #hasData>
                        <div style="display: flex; justify-content: space-between">
                          {{ item.value }}
                          <nz-tag *ngIf="item.unit !== ''" nzColor="success">{{ item.unit }}</nz-tag>
                        </div>
                      </ng-template>
                    </ng-container>
                  </td>
                </ng-container>
              </ng-container>
            </tr>
          </ng-container>
        </tbody>
      </nz-table>
    </ng-container>
  </nz-tab>
</nz-tabset>

<!-- new bulletin modal -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="(isManageModalAdd ? 'bulletin.new' : 'bulletin.edit') | i18n"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="70%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #defineForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="textInput" nzRequired="true">{{ 'bulletin.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <input nz-input placeholder="{{ 'bulletin.name.placeholder' | i18n }}" [(ngModel)]="define.name" name="inputText" required />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="dropdown" nzRequired="true">{{ 'bulletin.monitor.type' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-select
            nzAllowClear
            nzShowSearch
            name="appDefines"
            [(ngModel)]="define.app"
            (nzOnSearch)="onSearchAppDefines()"
            (ngModelChange)="onAppChange($event)"
            required
          >
            <ng-container *ngFor="let app of appEntries">
              <nz-option *ngIf="isAppListLoading" [nzValue]="app.key" [nzLabel]="app.key + '/' + app.value"></nz-option>
            </ng-container>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" [nzFor]="'filterLabels'">{{ 'monitor.search.label' | i18n }} </nz-form-label>
        <nz-form-control nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <app-form-field
            [item]="{
              field: 'labels',
              type: 'labels'
            }"
            [name]="'labels'"
            [(ngModel)]="filterLabels"
            (ngModelChange)="onFilterInputChange($event)"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="dropdown" nzRequired="true">{{ 'bulletin.monitor.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-select
            nzAllowClear
            nzShowSearch
            name="monitors"
            [(ngModel)]="define.monitorIds"
            (nzOnSearch)="onSearchMonitorsByApp(define.app)"
            nzMode="multiple"
            required
          >
            <ng-container *ngFor="let monitor of filteredMonitors">
              <nz-option *ngIf="isMonitorListLoading" [nzValue]="monitor.id" [nzLabel]="monitor.name"></nz-option>
            </ng-container>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="dropdown" nzRequired="true">{{ 'bulletin.monitor.metrics' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-transfer [nzDataSource]="hierarchies" [nzRenderList]="[leftRenderList, null]" (nzChange)="transferChange($event)">
            <ng-template #leftRenderList let-items let-onItemSelect="onItemSelect">
              <nz-tree
                [nzData]="treeNodes"
                nzExpandAll
                nzBlockNode
                nzCheckable
                nzCheckStrictly
                name="metrics"
                (nzCheckBoxChange)="treeCheckBoxChange($event, onItemSelect)"
              >
                <ng-template let-node>
                  <span
                    (click)="checkBoxChange(node, onItemSelect)"
                    class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open"
                  >
                    {{ node.title }}
                  </span>
                </ng-template>
              </nz-tree>
            </ng-template>
          </nz-transfer>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>

<!-- delete bulletin modal -->
<nz-modal
  [(nzVisible)]="isBatchDeleteModalVisible"
  [nzTitle]="'bulletin.batch.delete' | i18n"
  (nzOnCancel)="onBatchDeleteModalCancel()"
  (nzOnOk)="onBatchDeleteModalOk()"
  nzMaskClosable="false"
  nzWidth="40%"
>
  <div *nzModalContent class="-inner-content">
    <form nz-form #defineForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="textInput" nzRequired="true">{{ 'bulletin.name' | i18n }}</nz-form-label>
        <nz-form-control [nzSpan]="12" [nzErrorTip]="'validation.required' | i18n">
          <nz-select
            nzMode="multiple"
            nzPlaceHolder="Please select"
            [(ngModel)]="this.deleteBulletinIds"
            [nzShowSearch]="true"
            name="delete"
          >
            <nz-option *ngFor="let tab of bulletins" [nzLabel]="tab.name" [nzValue]="tab.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
</nz-modal>
